<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/echarts.js"></script>
    <script src="../lib/d3.js"></script>
</head>
<body>
<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
<script type="text/javascript" src="../lib/d3v4.js"></script>
<script type="text/javascript">
        //        路径配置,'./js/dist'本地文件路径
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
    require(
        [
            'echarts',
            'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
            'echarts/chart/bar'
        ],
        function (ec) {

            var myChart = ec.init(document.getElementById('main'));
            option = {
                timeline:{
                    data:[
                       '1954','1955','1956','1957','1958','1959','1960'
                    ],
                    label : {
                        formatter : function(s) {
                            return s.slice(0, 4);
                        }
                    },
                    autoPlay : true,
                    playInterval : 1000
                },
                options:[
                    {
                        title : {
                            'text':'1954',
                            'subtext':'wordfreq'
                        },
                        tooltip : {'trigger':'axis'},
                        legend : {
                            x:'right',
                            'data':['GDP'],
                            'selected':{
                                'GDP':true,

                            }
                        },
                        toolbox : {
                            'show':true,
                            orient : 'vertical',
                            x: 'right',
                            y: 'center',
                            'feature':{
                                'saveAsImage':{'show':true}
                            }
                        },
                        calculable : true,
                        grid : {'y':80,'y2':100},
                        xAxis : [{
                            'type':'category',
                            'axisLabel':{'interval':0},
                            'data':[
                                '北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
                                '上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
                                '湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
                                '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
                            ]
                        }],
                        yAxis : [
                            {
                                'type':'value',
                                'name':'次数',
                                'max':20000
                            },

                        ],
                        series : [
                            {
                                'name':'GDP',
                                'type':'bar',
                                'data': dataMap.dataGDP['2002']
                            }
                        ]
                    },
                    {
                        title : {'text':'2003全国宏观经济指标'},
                        series : [
                            {'data': dataMap.dataGDP['2003']},


                        ]
                    },
                    {
                        title : {'text':'2004全国宏观经济指标'},
                        series : [
                            {'data': dataMap.dataGDP['2004']},


                        ]
                    },
                    {
                        title : {'text':'2005全国宏观经济指标'},
                        series : [
                            {'data': dataMap.dataGDP['2005']},
                        ]
                    }
                ]
            };


            myChart.setOption(option);


            d3.select("canvas").style("opacity",0)
                .transition()
                .duration(1000)
                .style("opacity",1);

        }
    );

</script>

</body>
</html>
</body>
</html>